<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="${ctx}webjars/static/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}webjars/static/plugins/bootstrap/css/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}webjars/static/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="${ctx}webjars/static/css/common.css">

    <script src="${ctx}webjars/static/plugins/jquery/jquery.min.js"></script>
    <script src="${ctx}webjars/static/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="${ctx}webjars/static/plugins/vue/vue.min.js"></script>

    <script src="${ctx}webjars/static/js/common.js"></script>
    <title class="systemTitle"></title>
    <link rel="stylesheet" href="${ctx}webjars/static/themes/login/css/login.css">
</head>
<body>
<div id="myapp" class="container">
    <div class="form row">
        <div class="form-horizontal col-md-offset-3" id="login_form">
            <h3 class="form-title">欢迎登录<!--<label class="systemTitle"></label>--></h3>
            <label style="text-align: center;height: 18px;display: block;padding: 5px 0;margin-top: -15px;color: red" v-text="errorMsg"></label>
            <div class="col-md-10 col-md-offset-1">
                <div class="form-group">
                    <i class="fa fa-user fa-lg"></i>
                    <input class="form-control required" type="text" v-model="username" placeholder="帐号" name="username"
                           autofocus="autofocus" maxlength="20"/>
                </div>
                <div class="form-group">                        <i class="fa fa-lock fa-lg"></i>

                    <input class="form-control required" type="password"v-model="password" placeholder="密码" name="password"
                           maxlength="8"/>
                </div>
                <div class="form-group">
                        <i class="fa fa-arrow-right fa-lg"></i>
                        <input class="form-control required" type="text"  v-model="captcha" placeholder="验证码"
                               maxlength="8"/>
                        <img alt="单击可刷新！" class="form-control"style="height: 60px;" :src="src"
                             @click="refreshCode"/>
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-info btn-lg btn-block" @click="login" v-text="isLogining?'登录中...':'登录'" :disabled="isLogining">

                    </button>
                </div>

            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    window.localStorage.setItem("baseURL","${ctx}")


    $("body").keydown(function (event) {
        if (event.keyCode == "13") {//keyCode=13是回车键
            vm.login();
        }
    });


    var vm = new Vue({
        el: '#myapp',
        data: {
            username: '',
            password: '',
            userType: 2,
            captcha: '',
            error: false,
            errorMsg: '',
            src: (window.localStorage.getItem("baseURL")?window.localStorage.getItem("baseURL"):"")+'captcha.jpg',
            isLogining:false
        },
        beforeCreate: function () {
            getSystemParams()
            if (self != top) {
                top.location.href = self.location.href;
            }
        },
        methods: {
            refreshCode: function () {
                this.src = (window.localStorage.getItem("baseURL")?window.localStorage.getItem("baseURL"):"")+"captcha.jpg?t=" + $.now();
            },
            login: function (event) {
                vm.isLogining = true
                var data = "username=" + vm.username + "&password="
                    + vm.password + "&captcha=" + vm.captcha + "&userType=0";
                $.ajax({
                    type: "POST",
                    url: (window.localStorage.getItem("baseURL")?window.localStorage.getItem("baseURL"):"")+"login/sys",
                    data: data,
                    dataType: "json",
                    success: function (result) {
                        if (result.code == 0) {//登录成功
                            // if(result.userType==2){
                            //     //setCookie("csrftoken",result.csrftoken);
                            //     //setCookie("jumpserver_sessionid",result.sessionid);
                            //     parent.location.href = 'home.html';
                            // }else if(result.userType==1){
                            //     parent.location.href = 'index2.html';
                            // }else{
                            //     parent.location.href = 'index.html';
                            // }
                            parent.location.href = (window.localStorage.getItem("baseURL")?window.localStorage.getItem("baseURL"):"")+'index.html';
                        } else {
                            vm.error = true;
                            vm.errorMsg = result.msg;

                            vm.refreshCode();

                        }
                        setTimeout(function () {
                            vm.isLogining = false
                        },5000)
                    }
                });
            }
        }
    });

    function setCookie(name, value) {
        var Days = 30;
        var exp = new Date();
        exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
    }

    // Read tutorial on my blog: http://www.cnblogs.com/wisewrong/p/7124920.html

    var stars = document.getElementById('myapp')
    var star = document.getElementsByClassName('star')

    // js随机生成流星
    for (var j = 0; j < 30; j++) {
        var newStar = document.createElement("div")
        newStar.className = "star"
        newStar.style.top = randomDistance(30, -30) + 'px'
        newStar.style.left = randomDistance(150, 20) + 'px'
        stars.appendChild(newStar)
    }

    // 封装随机数方法
    function randomDistance(max, min) {
        var distance = Math.floor(Math.random() * (max - min + 1) * 10 + min)
        return distance
    }

    // 给流星添加动画延时
    for (var i = 0, len = star.length; i < len; i++) {
        if (i % 6 == 0) {
            star[i].style.animationDelay = '0s'
        } else {
            star[i].style.animationDelay = i * 0.8 + 's'
        }
    }
</script>

</body>
</html>